window.addEventListener('load',function(){
	var arrowL = document.querySelector('.arrow-l');
	var arrowR = document.querySelector('.arrow-r');
	var focus =document.querySelector('.focusBox');
	var focusWidth = focus.offsetWidth ;	
	console.log(focusWidth)
	//鼠标经过focues显示左右按钮
	focus.addEventListener('mouseenter', function(){
		arrowL.style.display = 'block'	
		arrowR.style.display = 'block'	
		//停止自动播放图片
		clearInterval(timer);
		timer = null;
	})
	//鼠标离开focues隐藏左右按钮
	focus.addEventListener('mouseleave', function(){
		arrowL.style.display = 'none'	
		arrowR.style.display = 'none';
		timer = setInterval(function(){
			arrowR.click();
		},2000);
	})
	var ul = focus.querySelector('div');
	var ol = focus.querySelector('.carousel-indicators')
	for ( var i = 0; i < ul.children.length; i++){
		//创建一个li
		var  li = document.createElement('li');
		//记录当前小圆圈的索引号 通过自定义属性来做
		li.setAttribute('index',i)
		ol.appendChild(li);
		//4.小圆圈排他思想，我们可以直接生成小圆圈的同时绑定点击事件
		li.addEventListener('click', function(){
			//干掉所有人，把所有的小li清除 current类名
			for(var i =0; i < ol.children.length; i++){
				ol.children[i].className = '';
				//留下我自己，当前的小li生成current类名
				this.className = 'current';
			}
			//5.点击小圆圈，滚动图片，滚动的对象是ul
			//移动距离：小圆圈的索引号x图片宽度
			//点击某个li，拿到当前li的索引号
			var index = this.getAttribute('index');
			//当我们点击了某个小li，就要把这个li的索引号给num
			num = index;
			//当我们点击了某个小li，就要把这个li的索引号给num
			circle = index;
			// num = circle = index;
			console.log(index)
			console.log(focusWidth);
			animate(ul,-index * focusWidth);
		})
	}
	//把ol里的第一个小li，类目设置为current
	ol.children[0].className = 'current';
	//6.克隆第一张图片，放到ul最后面
	var first = ul.children[0].cloneNode(true);
	ul.appendChild(first);
	//7.点击右侧按钮，图片滚动一次
	var num = 0;
	//circle 控制小圆圈的变化
	var circle = 0;
	//节流阀
	var flag = true;
	
	arrowR.addEventListener('click', function(){
		if (flag){
			//关闭节流阀
			flag = false;
		//如果走到最后一张复制的图片，此时ul的left值快速更改为0
		if(num == ul.children.length - 1){
			ul.style.left = 0;
			num = 0;
		}
		num++
		//添加回调函数（开启节流阀）
		animate(ul,-num * focusWidth, function(){
			flag = true;
		});
		//8.小圆圈随着左右按钮的点击而变化
		circle++
		//如果circle ==4 说明我们走到了最后克隆的图片了
		if(circle == ol.children.length ){
			circle = 0;
		}
		}
		//调用函数
		circleChange();
	})
	//9.左侧按钮功能实现
	arrowL.addEventListener('click', function(){
		if (flag){
			flag = false;
			//如果走到最后一张复制的图片，此时ul的left值快速更改为0
		if(num == 0){
			num = ul.children.length -1
			ul.style.left = -num * focusWidth + 'px';
		}
		num--;
		animate(ul,-num * focusWidth,function(){
			flag = true;
		});
		//8.小圆圈随着左右按钮的点击而变化
		circle--
		//如果circle < 0 在第一张图片，小圆圈要改为第四个(索引号为3)
		if(circle < 0 ){
			circle = ol.children.length - 1;
		}
		//调用函数
		circleChange()
		}
	})
	//封装函数
	function circleChange(){
		//先清除所有小圆圈的current类目
		for (var i = 0; i<ol.children.length; i++){
			ol.children[i].className= '';
		}
		//留下当前的小圆圈的current类名
		ol.children[circle].className = 'current'
	}
	//10.自动播放图片
	var timer = setInterval(function(){
		//手动调用点击事件
		arrowR.click();
	},2000);
})
